<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化标签</title>
    <style type="text/css">
        header,
        footer {
            height: 80px;
            background: #dedede;
        }
        
        main {
            height: 500px;
        }
        
        aside {
            float: left;
            width: 15%;
            height: 100%;
            background: #9696ff;
        }
        
        article {
            float: left;
            width: 85%;
            height: 100%;
            background: #ffff00;
        }
        
        nav {
            background: purple;
            height: 200px;
        }
        
        dialog {
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 100;
            width: 400px;
            height: 300px;
            background: rgb(109, 143, 253);
            border: 1px solid red;
            margin-left: -200px;
            margin-top: -150px;
        }
    </style>
</head>

<body>

    <header>
        HTML 5 中新增的语义化标签: header 、main 、footer 、aside 、article , 它们都是块元素
    </header>
    <main>
        <aside>
            侧边栏
            <nav></nav>
        </aside>
        <article>
            文章
            <h3>滕王阁序</h3>
            <h4>唐 王勃</h4>
            <section>
                豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
            </section>
            <section>
                时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
            </section>
        </article>
    </main>
    <footer></footer>

    <dialog open="open">hello</dialog>

</body>

</html>